/**
 * 条件渲染
 * 【与运算符 &&】true && expression 总是会返回 expression, 而 false && expression 总是会返回 false
 * 【三元运算符】三元操作符是右结合的，也就是说你可以像这样把它链接起来， 和 if … else if … else if … else 链类似
 * 【阻止组件渲染】render 方法直接返回 null，而不进行任何渲染，但生命周期依然会被调用
 */
import React from 'react';

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if(isLoggedIn) {
    return <UserGreeting />;
  } else {
    return <GuestGreeting />;
  }
}

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {
      isLoggedIn: false
    };
  }
  // 登录按钮
  handleLoginClick() {
    this.setState({
      isLoggedIn: true
    })
  }
  // 注销按钮
  handleLogoutClick() {
    this.setState({
      isLoggedIn: false
    })
  }
  render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;
    if(isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />
    }
    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    )
  }
}
export default LoginControl;
